import React from 'react';
import { Box, Typography } from '@mui/material';
import ArchitectureOutlinedIcon from '@mui/icons-material/ArchitectureOutlined';

// eslint-disable-next-line no-unused-vars
export const TechStackSection = ({ darkMode = false, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => {
  return (
    <Box>
      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <ArchitectureOutlinedIcon sx={iconSx} />
        <Typography sx={largeHeaderSx}>
          Our Tech Stack
        </Typography>
      </Box>
      
      <Typography sx={listItemSx}>
        Powers production SAAS applications including Articoli e Social and MenuClick24. Built with proven, scalable technologies.
      </Typography>
      
      <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr', md: '1fr 1fr 1fr 1fr' } }}>
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Database
          </Typography>
          <Typography sx={listItemSx}>• MongoDB</Typography>
          <Typography sx={listItemSx}>• Document-based storage</Typography>
          <Typography sx={listItemSx}>• Flexible schema</Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Go API
          </Typography>
          <Typography sx={listItemSx}>• Fiber framework</Typography>
          <Typography sx={listItemSx}>• Gocron scheduling</Typography>
          <Typography sx={listItemSx}>• High performance</Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Node API
          </Typography>
          <Typography sx={listItemSx}>• Express.js</Typography>
          <Typography sx={listItemSx}>• node-cron</Typography>
          <Typography sx={listItemSx}>• JWT authentication</Typography>
        </Box>
        
        <Box>
          <Typography sx={smallHeaderSx} gutterBottom>
            Frontend
          </Typography>
          <Typography sx={listItemSx}>• React 18</Typography>
          <Typography sx={listItemSx}>• Material UI</Typography>
          <Typography sx={listItemSx}>• react-query</Typography>
          <Typography sx={listItemSx}>• react-hook-form</Typography>
        </Box>
      </Box>
    </Box>
  );
};